<template>
  <v-app>
    <v-container>
      <!-- 头部开始 -->
      <v-row class="header">
        <!-- logo部分 -->
        <v-col lg="4" sm="12" xs="12">
          <a href="#"><img src="../../assets/images/logo.png" alt=""></a>
        </v-col>
        <v-col class="header-right" lg="8">
          <!-- 下拉菜单 -->
          <v-col lg="2">
            <!-- 刷新做了另外一个页面 -->
            <div class="header-select">
              <span>简体中文</span>
              <ul class="header-ul">
                <li v-for="item in menuForm" :key="item.id">
                  <a href="#">{{ item.language }}</a>
                </li>
              </ul>
            </div>
          </v-col>
          <!-- 客服帮助 -->
          <v-col class="helpBox" lg="4">
            <span>需要帮助?</span>
            <a>在线客服</a>
          </v-col>
        </v-col>
      </v-row>
      <!-- 头部结束 -->
      <!-- 主体部分开始 -->
      <v-row class="main mt-5">
        <v-col lg="12">
          <v-row>
            <v-col class="banner" sm="0" lg="6">
              <a href="#"><img style="height:100%;width:100%;" src="./images/logon.png" alt=""></a>
            </v-col>
            <v-col class="white loginBox" lg="6">
              <!-- fixen-tabs 可以拉伸 -->
              <!-- tab切换栏 -->
              <!-- change事件监听 -->
              <v-tabs @change="tabChange" fixed-tabs background-color="#fff" color="red" v-model="tab">
                <v-tab class="black--text tab-text" key="tab1">账号密码登录</v-tab>
                <v-tab class="black--text tab-text" key="tab2">手机验证登录</v-tab>
              </v-tabs>
              <v-tabs-items v-model="tab">
                <!-- 账号密码登录 -->
                <v-tab-item key="tab1">
                  <!-- lazy-validation 懒验证 -->
                  <v-form ref="userInfoRef" lazy-validation v-model="isOkUser" class="pt-5">
                    <!-- 登录名 -->
                    <v-text-field outlined placeholder="请输入邮箱/会员登录名" v-model="formUser.username"
                      :rules="formRules.nameRules" label="邮箱/会员登录名" :counter="20" required></v-text-field>
                    <!-- 密码 -->
                    <v-text-field @click:append="eyePasswordForm" outlined placeholder="请登录密码"
                      v-model="formUser.password" :type="passwordType.type" :rules="formRules.passwordRules"
                      :append-icon="passwordType.icon" label="密码" required></v-text-field>
                    <v-btn :disabled="!isOkUser" class="white--text red mt-5 mb-10" block x-large
                      @click="loginUser">登录</v-btn>
                  </v-form>
                  <!-- 按钮 -->
                  <div class="d-flex justify-space-between">
                    <span><a href="#" class="black--text">忘记密码</a></span>
                    <span><router-link to="/enroll">免费注册</router-link></span>
                  </div>
                </v-tab-item>
                <!-- 手机验证登录 -->
                <v-tab-item key="tab2">
                  <!-- 手机号 -->
                  <!-- lazy-validation 懒验证 -->
                  <v-form ref="userMobileRef" lazy-validation v-model="isMoblieOk" class="pt-5">
                    <v-row>
                      <!-- 手机号 -->
                      <v-col class="main-select pr-0" xl="9" lg="3" md="3" sm="3">
                        <v-select outlined persistent-hint single-line :items="types" :label="value_type"
                          item-text="name" item-value="id" v-model="value_type"
                          @change="getvalue_typeSelected(value_type)"></v-select>
                      </v-col>
                      <!-- 验证框 -->
                      <v-col lg="9" md="6" xl="3" sm="9" class="pl-0">
                        <v-text-field outlined :rules="formRules.mobileRules" v-model="mobileForm.mobile"
                          placeholder="请输入手机号" label="手机号" :counter="11" :max-length="11" required></v-text-field>
                      </v-col>
                    </v-row>
                    <!-- </div> -->
                    <v-row class="align-center">
                      <v-col lg="12" class="pr-3">
                        <v-text-field :rules="formRules.authcodeRules" outlined class="authcode"
                          v-model="mobileForm.authcode" placeholder="请输入验证码" label="验证码" required></v-text-field>
                      </v-col>
                    </v-row>
                    <v-btn @click="loginMobile" class="white--text red mt-5 mb-10" :disabled="!isMoblieOk" block
                      x-large>登录</v-btn>
                  </v-form>
                  <!-- 手机号加验证码登录按钮 -->
                </v-tab-item>
              </v-tabs-items>
            </v-col>
          </v-row>
        </v-col>
      </v-row>
      <!-- 主体部分结束 -->
      <!-- 底部开始 -->
      <div class="mt-10 d-flex flex-column justify-center align-center">
        <v-row class="footer">
          <!-- 链接 -->
          <v-col class="d-flex justify-center align-center pa-0" lg="12">
            <span class="pa-5"><router-link to="#">
                About Us
              </router-link></span>
            <span class="gap-line"></span>
            <span class="pa-5"><router-link to="#">
                FAQ
              </router-link></span>
            <span class="gap-line"></span>
            <span class="pa-5"><router-link to="#">
                Help
              </router-link></span>
            <span class="gap-line"></span>
            <span class="pa-5"><router-link to="#">
                Site Map
              </router-link></span>
            <span class="gap-line"></span>
            <span class="pa-5"><router-link to="#">
                ontact Us
              </router-link></span>
            <span class="gap-line"></span>
            <span class="pa-5"><router-link to="#">
                obile Site
              </router-link></span>
          </v-col>
        </v-row>
        <v-row class="footer">
          <!-- 链接 -->
          <v-col class="d-flex justify-center align-center" lg="12">
            <span class="pl-5 pr-5"><router-link to="#">
                User Agreement
              </router-link></span>
            <span class="gap-line"></span>
            <span class="pl-5 pr-5"><router-link class="display-0" to="#">
                Declaration
              </router-link></span>
            <span class="gap-line"></span>
            <span class="pl-5 pr-5"><router-link to="#">
                Privacy Policy
              </router-link></span>
          </v-col>
        </v-row>
        <v-row class="footer">
          <!-- 链接 -->
          <v-col class="d-flex pa-0 justify-center CoptText" lg="12">
            <span class="pl-5 pr-5 footer-texts"><router-link to="#">
                Copyright @ 1998-2024 Focus Technology Co., Ltd. All Rights Reserved
              </router-link></span>
          </v-col>
        </v-row>
        <v-row class="footer">
          <!-- 链接 -->
          <v-col lg="12" class=" d-flex justify-center algin-center">
            <a href="#" class="d-flex ">
              <i><img class="mt-1" src="./images/police.png" alt=""></i>
              <div>
                <div class="police-text ml-2"><span>苏公网安备 32011202000076号</span></div>
              </div>
            </a>
          </v-col>
        </v-row>
      </div>
      <!-- 底部结束 -->
    </v-container>
  </v-app>
</template>

<script>
export default {
  name: 'MyLogin',
  data() {
    return {
      // 账号密码登入是否满足要求
      isOkUser: null,
      // 手机是否为11位数
      isMoblieOk: null,
      // 下拉菜单数据
      menuForm: [
        { id: 1, language: '简体中文' },
        { id: 2, language: 'English' },
        { id: 3, language: '简体中文' },
        { id: 4, language: 'English' },
        { id: 5, language: '简体中文' }
      ],
      // 默认值
      value_type: '+86',
      // 下拉框的属性与名称
      types: [
        {
          id: "+86",
          name: "+86",
        },
        {
          id: "+852",
          name: "+852",
        },
        {
          id: "+853",
          name: "+853",
        },
        {
          id: "+886",
          name: "+886",
        },
      ],
      // 设置为null 就可以使用自己在tab标签中自定义
      tab: null,
      // 登录表单账号密码登录
      formUser: {
        username: '',
        password: ''
      },
      // // 手机号登入
      // mobileFormItems: ['+86', '+852', '+853', '+886'],
      // 手机验证表单
      mobileForm: {
        // 手机号
        mobile: '',
        // 验证码
        authcode: ''
      },
      // 用户与密码表单验证
      formRules: {
        // 用户验证
        nameRules: [
          v => !!v || '登录名不能为空',
          v => (v && v.length <= 20 && v.length >= 5) || '登录名长度为5-20',
          // 我认为要查找是否有@ 有就说明用的是邮箱 邮箱未完成验证
        ],
        // 密码验证
        passwordRules: [
          v => !!v || '密码不能为空',
        ],
        // 手机号验证
        mobileRules: [
          v => !!v || '手机号码不能为空',
          v => (v && /^[1][3-9][0-9]{9}$/.test(v)) || '请输入正确的手机号码'
        ],
        // 验证码不能为空
        authcodeRules: [
          v => !!v || '验证码不能为空'
        ]
      },
      // 密码框的type属性
      passwordType: {
        type: 'password',
        icon: 'mdi-eye-outline'
      }
    }
  },
  methods: {
    // 获取type
    getvalue_typeSelected(val) {
      this.value_type = val;
    },
    // 密码框 小图标 小眼睛
    eyePasswordForm() {
      if (this.passwordType.type == 'password') {
        this.passwordType.type = 'text'
        this.passwordType.icon = 'mdi-eye-off-outline'
      } else if (this.passwordType.type == 'text') {
        this.passwordType.type = 'password'
        this.passwordType.icon = 'mdi-eye-outline'
      }
    },
    // 用户账号密码登录按钮
    loginUser() {
      // success 返回一个布尔值
      let isSuccess = this.$refs.userInfoRef.validate()
      if (!isSuccess) return
      alert("登录成功")
    },
    // 手机加验证码登入
    loginMobile() {
      // success 返回一个布尔值
      let isSuccess = this.$refs.userMobileRef.validate()
      if (!isSuccess) return
      alert("登录成功")
    },
    // 清空表单 转跳时清空
    tabChange(voil) {
      // 判断voil 0是账号密码 1是手机验证
      if (voil == 0) {
        // this.$refs.userMobileRef.reset()
      } else if (voil == 1) {
        this.$refs.userInfoRef.reset()
      }
      // console.log(voil);
    }
  }
}
</script>

<style lang='scss' scoped>
// body {
//   min-width: 440px;
// }
ul {
  list-style: none;
}

.CoptText {
  text-align: center;
}

.header-select {
  cursor: pointer;
  width: 5.3125rem;
  height: 1.875rem;
  text-align: left;
  padding-left: .625rem;
  line-height: 1.875rem;
  position: relative;

  &:hover .header-ul {
    display: block;
  }

  .header-ul {
    display: none;
    padding: 0;
    background-color: #fff;

    li {
      width: 100%;
      padding-right: 0;
      height: 1.875rem;
      text-align: center;
      line-height: 1.875rem;

      &:hover {
        background-color: rgb(218, 224, 230);
      }

      a {
        font-size: .875rem;
        color: #000;
      }
    }
  }

  &::after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border: .3125rem solid transparent;
    border-top-color: black;
    top: .875rem;
    right: .5rem;
    border-bottom: none;
    transition: transform .5s ease 0s;
  }

  &:hover::after {
    transform: rotate(180deg);
  }

  &:hover {
    background-color: rgb(217, 223, 229);
  }
}

.mobile-select {
  height: 1.75rem;
  width: 4.0625rem;
  border-bottom: .0375rem solid rgba(0, 0, 0, .50);
  appearance: auto;
  text-align: center;

  &::after {
    content: "1";
  }
}

.police-text {
  width: 8.125rem;
  font-size: .75rem;
}

.authcode {
  position: relative;

  &::before {
    position: absolute;
    right: .625rem;
    top: .3125rem;
    content: "获取验证码";
    text-align: center;
    line-height: 2.875rem;
    cursor: pointer;
    z-index: 1;
    color: #000;
    display: block;
    width: 90px;
    height: 2.875rem;
    // margin-right: 10px;
  }
}

a {
  text-decoration: none;
  font-size: .875rem;
}

.container {
  width: 60rem;
}

.white {
  background-color: white;
}

.v-application {
  background-color: rgb(240, 241, 242) !important;

}

.header-right {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header {
  padding: 1.875rem .625rem 0px 10px;
}

.helpBox {
  display: flex;
  justify-content: end;

  span {
    margin-right: .625rem;
  }

  a {
    margin-right: .625rem;
  }
}

.loginBox {
  padding: 1.875rem 1.25rem 0;
}

.pointer {
  cursor: pointer;
}

.banner {
  padding: 0;
}

.gap-line {
  border-left: .0625rem solid #ccc;
  display: inline-block;
  height: 1rem;
}

.footer-policeBox {
  width: 9.375rem;

  span {
    font-size: .75rem;
  }
}

.tab-text {
  font-size: 1.25rem;
}

.footer {
  width: 100%;

  a {
    color: rgb(0, 0, 0);
    font-weight: 100;

    &:hover {
      color: red;
    }
  }
}

.header-select {
  span {
    font-size: .875rem;
  }
}

@media screen and (max-width: 960px) {
  .banner {
    display: none;
  }

  .container {
    width: 31.25rem;
  }

  .footer span {
    padding: 10px !important;
    // padding-top: 20px!important;
  }

  .footer .gap-line {
    padding: 0 !important;
  }
}

@media screen and (max-width: 750px) {
  .helpBox {
    a {
      font-size: .75rem;
    }

    span {
      font-size: .75rem;
    }
  }

  .header-select {
    span {
      font-size: .6667rem;
    }
  }

  .container {
    width: 31.25rem;

    .footer {
      span {
        padding: 0 !important;

        a {
          font-size: 0.12rem !important;
        }
      }

      .gap-line {
        margin: 0 5px;
      }

      .footer-texts {
        padding: 0 10px !important;
      }
    }
  }
}

@media screen and (max-width: 600px) {
  .container {
    width: 100%;
  }

  .main-select {
    flex: 0.4;
  }
  .btnss {
    flex: 0.5;
  }
}
</style>